<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>工具</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/static/css/duyi-video.css" crossorigin="anonymous">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>

<%--头部--%>
<jsp:include page="/WEB-INF/jsp/common/header.jsp"></jsp:include>
<br><br>
<%--首页内容区域--%>
<div class="container">

    <%--    工具导航--%>
    <ul class="nav nav-pills">
        <li class="nav-item" >
            <a class="nav-link  ${typeId== null || typeId == 0 ? "active":"" }" href="#">全部</a>
        </li>
        <c:forEach items="${toolsTypeList}" var="toolType">
            <li class="nav-item"  >
                <a class="nav-link ${toolType.id == typeId ? "active":""}" href="/tools/${toolType.id}">${toolType.name}</a>
            </li>
        </c:forEach>

    </ul>
    <%--   展示内容 --%>
    <c:forEach items="${toolsItems.list}" var="item" begin="0" varStatus="idx">
        <c:if test="${idx.index %4 == 0}">
            <div class="row row-cols-1 row-cols-md-4 mt-2">
        </c:if>
        <div class="col mb-3">
            <a href="#" target="_blank">
                <div class="card select-shadow">
                    <img src="${item.iconUrl}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <p class="card-text text-center">${item.name}</p>
                    </div>
                </div>
            </a>
        </div>
        <c:if test="${idx.index %4 == 3 || idx.last}">
            </div>
        </c:if>
    </c:forEach>

        <%-- 分页--%>
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                <c:if test="${!toolsItems.isFirstPage}">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true" target="_parent">上一页</a>
                    </li>
                </c:if>

                <c:forEach end="${toolsItems.pages}"  begin="1" varStatus="idx">
                    <li class="page-item"><a class="page-link" href="/courseList/${typeId}?pageNum=${idx.index}" target="_parent">${idx.index}</a></li>
                </c:forEach>
                <c:if test="${!toolsItems.isLastPage}">
                    <li class="page-item">
                        <a class="page-link" href="/courseList/${typeId}?pageNum=${toolsItems.pageNum+1}" target="_parent">下一页</a>
                    </li>
                </c:if>

            </ul>
        </nav>
</div>
<br>
<br>
<%--网站的尾部--%>
<jsp:include page="/WEB-INF/jsp/common/footer.jsp"></jsp:include>
</body>
</html>